import DaoDaoMindMap from './DaodaoMindMap'
import { hasParentType } from './types/global'
import { fabric } from 'fabric'

export class ContextMenu {
	dom: HTMLElement | null
	domId: string
	topLevel: DaoDaoMindMap
	menus: {[propName: string]: HTMLElement}
	openMenuEvent: fabric.IEvent<MouseEvent> | null
	constructor(topLevel:DaoDaoMindMap,domId?: string) {
		this.topLevel = topLevel
		this.domId = domId || ''
		this.dom = null
		this.menus = {}
		this.openMenuEvent = null
		this.init()
	}
	init() {
		let wrapper = null
		if(this.domId) {
			if(typeof this.domId === 'string') {
				const wrapperEl = document.getElementById(this.domId)
				if(wrapperEl){
					wrapper = wrapperEl
				}else{
					wrapper = null
					this.domId = ''
				}
			} else {
				wrapper = null
				this.domId = ''
			}
			if(!wrapper) {
				throw Error('ContextMenu 需要传入一个有效的id(ContextMenu needs to be passed in a valid id)')
			}
		}else{
			wrapper = document.createElement('div')
			wrapper.classList.add('ddmp_contextmenu')

			// 初始化按钮
			const addFreeItemBtn = document.createElement('div')
			addFreeItemBtn.classList.add('ddmp_menu_button')
			addFreeItemBtn.innerHTML = '添加自由节点'
			this.menus.addFreeItemBtn = addFreeItemBtn

			const addParentItemBtn = document.createElement('div')
			addParentItemBtn.classList.add('ddmp_menu_button')
			addParentItemBtn.innerHTML = '添加上级节点'
			this.menus.addParentItemBtn = addParentItemBtn

			const addChildItemBtn = document.createElement('div')
			addChildItemBtn.classList.add('ddmp_menu_button')
			addChildItemBtn.innerHTML = '添加下级节点'
			this.menus.addChildItemBtn = addChildItemBtn

			const addSiblingItemBtn = document.createElement('div')
			addSiblingItemBtn.classList.add('ddmp_menu_button')
			addSiblingItemBtn.innerHTML = '添加同级节点'
			this.menus.addSiblingItemBtn = addSiblingItemBtn

			const addImageItemBtn = document.createElement('div')
			addImageItemBtn.classList.add('ddmp_menu_button')
			addImageItemBtn.innerHTML = '添加/替换图片'
			const addFileBtn = document.createElement('input')
			addFileBtn.classList.add('ddmp_menu_addfile')
			addFileBtn.type = "file"
			addImageItemBtn.appendChild(addFileBtn)
			this.menus.addImageItemBtn = addImageItemBtn

			const deleteImageItemBtn = document.createElement('div')
			deleteImageItemBtn.classList.add('ddmp_menu_button')
			deleteImageItemBtn.innerHTML = '删除图片'
			this.menus.deleteImageItemBtn = deleteImageItemBtn


			const deleteItemBtn = document.createElement('div')
			deleteItemBtn.classList.add('ddmp_menu_button')
			deleteItemBtn.innerHTML = '删除节点及子元素'
			this.menus.deleteItemBtn = deleteItemBtn

			addFreeItemBtn.onclick = () => {this.topLevel.addFreeItem(this.openMenuEvent as fabric.IEvent<MouseEvent>)}
			addChildItemBtn.onclick = () => {this.topLevel.addChildItem()}
			addParentItemBtn.onclick = () => {this.topLevel.addParentItem()}
			addSiblingItemBtn.onclick = () => {this.topLevel.addSiblingItem()}
			deleteItemBtn.onclick = () => {this.topLevel.deleteItem()}
			addFileBtn.onchange = (e:Event) => {this.topLevel.addImage(e)}
			deleteImageItemBtn.onclick = () => {this.topLevel.deleteImgItem()}

			wrapper.onclick = () => {
				this.hideMenu()
			}

			wrapper.appendChild(addFreeItemBtn)
			wrapper.appendChild(addParentItemBtn)
			wrapper.appendChild(addChildItemBtn)
			wrapper.appendChild(addSiblingItemBtn)
			wrapper.appendChild(addImageItemBtn)
			wrapper.appendChild(deleteImageItemBtn)
			wrapper.appendChild(deleteItemBtn)
		}
		this.dom = wrapper

        this.topLevel.wrapperEl!.appendChild(this.dom)

        const style = document.createElement('style')
        style.innerHTML = `
            .ddmp_contextmenu{
                position: absolute;
                top: 0;
                left: 0;
                min-width: 230px;
                padding: 4px 0;
                border-radius: 8px;
                padding: 18px;
                background-color: #fff;
                -webkit-box-shadow: 0 0 8px rgba(35,37,42,.14);
                box-shadow: 0 0 8px rgba(35,37,42,.14);
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                display: none;
            }
            .ddmp_contextmenu .ddmp_menu_button {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 0 10px;
                min-height: 38px;
                line-height: 38px;
                border-radius: 4px;
                white-space: nowrap;
                cursor: pointer;
                -webkit-transition: all .2s;
                transition: all .2s;
				position: relative;
            }
			.ddmp_contextmenu .ddmp_menu_button .ddmp_menu_addfile {
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				opacity:0;
				cursor: pointer;
			}
        `
        this.dom.appendChild(style)
	}
	showMenu(event: fabric.IEvent<MouseEvent>) {
		this.openMenuEvent = event
		if(this.dom) {
			this.dom.style.display = 'block'
			const parentWidth = this.topLevel.wrapperEl?.clientWidth || 0
			const parentHeight = this.topLevel.wrapperEl?.clientHeight || 0
			const domWidth = this.dom.clientWidth
			const domHeight = this.dom.clientHeight
			const eventX = event.pointer?.x || 0
			const eventY = event.pointer?.y || 0
			let left = eventX
			let top = eventY
			if((domWidth + eventX) > parentWidth) {
				left = left - domWidth
			}
			if((domHeight + eventY) > parentHeight) {
				top = top - domHeight
			}
			this.dom.style.top = top + 'px'
			this.dom.style.left = left + 'px'

			const target = event.target as hasParentType<fabric.Object | undefined>
			console.log(target)
			if(target.parent){
				this.menus.addFreeItemBtn.style.display = 'none'
				this.menus.addParentItemBtn.style.display = 'block'
				this.menus.addChildItemBtn.style.display = 'block'
				this.menus.addSiblingItemBtn.style.display = 'block'
				this.menus.addImageItemBtn.style.display = 'block'
				this.menus.deleteItemBtn.style.display = 'block'
				if(target.parent.img) {
					this.menus.deleteImageItemBtn.style.display = 'block'
				}else{
					this.menus.deleteImageItemBtn.style.display = 'none'
				}
			}else{
				this.menus.addFreeItemBtn.style.display = 'block'
				this.menus.addParentItemBtn.style.display = 'none'
				this.menus.addChildItemBtn.style.display = 'none'
				this.menus.addImageItemBtn.style.display = 'none'
				this.menus.addSiblingItemBtn.style.display = 'none'
				this.menus.deleteItemBtn.style.display = 'none'
				this.menus.deleteImageItemBtn.style.display = 'none'
			}

			if(this.topLevel.select?.activeItem?.parent) {
				this.menus.addSiblingItemBtn.style.display = 'block'
			}else{
				this.menus.addSiblingItemBtn.style.display = 'none'
			}
		}
	}
	hideMenu() {
		if(this.dom) {
			this.dom.style.display = 'none'
		}
	}
	disposeMenu() {
		if(this.dom) this.topLevel.wrapperEl?.removeChild(this.dom)
	}
}